iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

33歲轉職者的前端筆記系列 第 3

33歲轉職者的前端筆記-DAY 3 什麼是 iframe 及使用心得

  • 分享至 

  • xImage
  •  

iframe 是 寫網頁常見的語法之一

在進公司前不知道有這語法

但通常一個網頁內容 左側或上方選單都是固定相同的內容,當時我還笨笨的每個分頁都複製貼上在改

請教公司資深工程師後才知道可以使用 iframe 真的很方便又省時呢!

什麼是 iframe

iframe 是 一種用來設定嵌入的 HTML 框架,可以在網頁內置另一個網頁,例如 a 網頁可以內置 b 網頁、c網頁等等。
常見的範例,如在部落格想要引入 Youtube 影片,或是每一頁都有相同區塊,只是要改中間內容,那就可以使用 iframe的方式去嵌入另外做好的網頁內容。

語法範例

      <iframe
        src="https://www.youtube.com/embed/C4DTfP-7VyE"
        width="100%"
        title="YouTube video player"
        frameborder="0"
        allowfullscreen="true"
      >
      </iframe>

嵌入所需的 Youtube 影片之後,我們可以設定影片的寬度、高度、外框參數、卷軸參數等等(本範例只有改寬)

iframe 常見語法屬性範例

<iframe src>:可嵌入所需的頁面網址。

<iframe height>:可以自定iframe區塊的高度。

<iframe width>:自定iframe區塊之寬度。

<iframe name>:可以自定該iframe的名稱。

frameborder:是否需要顯示邊框,1是要 2 不要

當然還有很多屬性,這裡列出目前我有使用過的語法屬性。
以使用心得來說,覺得很方便又很快速的可以呈現想要的效果,在開發過程也能更順利。
對於新手來說,能用簡單方式做出公司的專案這也是必需要學的語法呢。


上一篇
33歲轉職者的前端筆記-DAY 2 如何處理 BUG 及遇到 BUG 的心態
下一篇
33歲轉職者的前端筆記 DAY 4 固定浮動選單 RWD 寫法
系列文
33歲轉職者的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言